What is postcss-focus-within?
The postcss-focus-within package is a PostCSS plugin that adds support for the :focus-within pseudo-class to CSS. This pseudo-class applies styles to an element if it or any of its descendants have focus. This is particularly useful for improving accessibility and user experience by providing visual feedback when interacting with form elements or other interactive components.
What are postcss-focus-within's main functionalities?
Basic Usage
This feature allows you to use the :focus-within pseudo-class in your CSS. The plugin will transform it into equivalent CSS that works in all browsers by applying the styles to the element itself and all its descendants.
/* Input CSS */
.container:focus-within {
background-color: yellow;
}
/* Output CSS */
.container:focus,
.container *:focus {
background-color: yellow;
}
Nested Focus
This feature allows you to apply styles to nested elements when any of the nested elements or their descendants are focused. The plugin ensures that the styles are applied correctly by transforming the CSS.
/* Input CSS */
.form:focus-within .input {
border-color: blue;
}
/* Output CSS */
.form:focus .input,
.form *:focus .input {
border-color: blue;
}
Other packages similar to postcss-focus-within
postcss-pseudo-class-enter
The postcss-pseudo-class-enter package is a PostCSS plugin that adds support for the :enter pseudo-class, which applies styles when an element is inserted into the DOM. While it focuses on a different pseudo-class, it similarly enhances CSS capabilities by adding support for a non-standard pseudo-class.
postcss-pseudo-class-any-link
The postcss-pseudo-class-any-link package is a PostCSS plugin that adds support for the :any-link pseudo-class, which matches any anchor element with an href attribute. This package, like postcss-focus-within, extends CSS by adding support for a pseudo-class that improves styling flexibility.
PostCSS Focus Within
PostCSS Focus Within lets you use the :focus-within
pseudo-class in CSS,
following the Selectors Level 4 specification.
It is the companion to the focus-within polyfill.
.my-form-field:focus-within label {
background-color: yellow;
}
.my-form-field[focus-within] label {
background-color: yellow;
}
.my-form-field:focus-within label {
background-color: yellow;
}
PostCSS Focus Within duplicates rules using the :focus-within
pseudo-class
with a [focus-within]
attribute selector, the same selector used by the
focus-within polyfill. This replacement selector can be changed using the
replaceWith
option. Also, the preservation of the original :focus-within
rule can be disabled using the preserve
option.
Usage
Add PostCSS Focus Within to your project:
npm install postcss postcss-focus-within --save-dev
Use PostCSS Focus Within to process your CSS:
const postcssFocusWithin = require('postcss-focus-within');
postcssFocusWithin.process(YOUR_CSS );
Or use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssFocusWithin = require('postcss-focus-within');
postcss([
postcssFocusWithin()
]).process(YOUR_CSS );
PostCSS Focus Within runs in all Node environments, with special
instructions for:
Options
preserve
The preserve
option defines whether the original selector should remain. By
default, the original selector is preserved.
focusWithin({ preserve: false });
.my-form-field:focus-within label {
background-color: yellow;
}
.my-form-field[focus-within] label {
background-color: yellow;
}
replaceWith
The replaceWith
option defines the selector to replace :focus-within
. By
default, the replacement selector is [focus-within]
.
focusWithin({ replaceWith: '.focus-within' });
.my-form-field:focus-within label {
background-color: yellow;
}
.my-form-field.focus-within label {
background-color: yellow;
}
.my-form-field:focus-within label {
background-color: yellow;
}